import { fileURLToPath, URL } from 'node:url'

import { defineConfig, HttpProxy } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import { AntDesignResolver } from './build/antv'
import Unocss from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const importStyle: 'less' | boolean = command === 'build' ? 'less' : false
  return {
    base: mode === 'production' ? './' : '/',
    plugins: [
      vue({
        reactivityTransform: true
      }),
      vueJsx(),
      AutoImport({
        imports: [
          'vue',
          "vue/macros",
          'vue-router',
          'pinia',
          '@vueuse/core'
        ],
        dirs: ['./src/stores', './src/hooks'],
        resolvers: [
          AntDesignResolver({
            importStyle
          })
        ],
        dts: './types/auto-imports.d.ts'
      }),
      Components({
        dts: './types/components.d.ts',
        resolvers: [
          AntDesignVueResolver({
            importStyle,
            resolveIcons: true
          })
        ]
      }),
      Unocss(),
      {
        name: 'improve-developer-experience',
        apply: 'serve',
        enforce: 'pre',
        transform(code, id) {
          // fix: element-plus按需加载时组件样式导致整个项目刷新问题
          if (/src\/main.ts$/.test(id)) {
            return {
              code: `import 'ant-design-vue/dist/antd.css';${code}`,
              map: null
            };
          }
        }
      }
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        'components': fileURLToPath(new URL('./src/components', import.meta.url)),
        'api': fileURLToPath(new URL('./src/api', import.meta.url)),
        'store': fileURLToPath(new URL('./src/store', import.meta.url)),
        'utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
        'config': fileURLToPath(new URL('./src/config', import.meta.url)),
        'hooks': fileURLToPath(new URL('./src/hooks', import.meta.url)),
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          charset: false,
          additionalData: `@import "./src/styles/variables.scss";`
        },
      },
    },
    server: {
      host: 'localhost',
      port: 4000,
      open: true,
      proxy: {
        '/api': {
          // target: 'http://101.33.211.252:8080/',
          // target: 'http://182.254.158.133:12503',
          // target: 'https://renzhi.legendpin.top/',
          target: `http://localhost:8080`,
          changeOrigin: true,
          configure: proxyConfigure
        }
      }
    },
    build: {
      target: 'chrome58'
    }
  }
})

function proxyConfigure(proxy: HttpProxy.Server) {
  proxy.on('proxyReq', (proxyReq) => {
    const { method, protocol, path } = proxyReq;
    const host = proxyReq.getHeader('host')
    const formattedMethod = `[${method}]`.padEnd(6, ' ');
    console.log(`${formattedMethod} ${protocol}//${host}${path}`);
  });
}